package com.frxuexi.mdm2205.demo

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Preview
@OptIn(ExperimentalLayoutApi::class)
@Composable
fun Demo04() {
    val list = listOf<String>(
        "hello",
        "hello2223",
        "hellorrr",
        "hellosfdf",
        "这是我的内容",
        "hello",
        "hello2223",
        "hellorrr",
        "hellosfdf",
        "这是我的内容"
    )
    FlowRow(Modifier.padding(10.dp),horizontalArrangement=Arrangement.spacedBy(10.dp),
        verticalArrangement = Arrangement.spacedBy(10.dp)) {
        list.forEach {
            FlowItem(text = it)
        }
    }
}

@Composable
fun FlowItem(text: String) {
    Text(text = text,
        modifier = Modifier
            .background(Color.Yellow, RoundedCornerShape(20.dp))
            .border(1.dp, Color.Gray, RoundedCornerShape(20.dp))
            .padding(horizontal = 10.dp, vertical = 5.dp)
    )
}